<template>
	<view class="">
		<view class="time-axis">
			<view class="time-control">
				<van-icon :name="play ? 'pause' : 'play'" />
			</view>
			<view class="time-line">
				<view class="item" v-for="(item, index) in list">{{item}}</view>
			</view>

		</view>
		<div id="lineDiv" class="lineDiv">
			<div id="minDiv" class="minDiv">
				<!-- <div id="vals" class="vals">0</div> -->
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				play: false,
				list: ['10:43', '11:08', '11:33', '11:58', '12:22', '12:47']
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				let that = this
				window.onload = function() {
         
					var lineDiv = document.getElementById('lineDiv'); //长线条
					var minDiv = document.getElementById('minDiv'); //小方块
					var msg = document.getElementById("msg");
					var vals = document.getElementById("vals");
					var ifBool = false; //判断鼠标是否按下
					//事件
					var start = function(e) {
						e.stopPropagation();
						ifBool = true;
						console.log("鼠标按下")

					}
					var move = function(e) {
						console.log("鼠标拖动")
					
						if(ifBool) {
						if (!e.touches) { //兼容移动端
							var x = e.clientX;
						} else { //兼容PC端
							var x = e.touches[0].pageX;
						}
						//var x = e.touches[0].pageX || e.clientX; //鼠标横坐标var x
						var lineDiv_left = that.getPosition(lineDiv).left; //长线条的横坐标
						var minDiv_left = x - lineDiv_left; //小方块相对于父元素（长线条）的left值 
						if (minDiv_left >= lineDiv.offsetWidth - 15) {
							minDiv_left = lineDiv.offsetWidth - 15;
						}
						if (minDiv_left < 0) {
							minDiv_left = 0;
						}
						// let value = 272 / 6
						if(minDiv_left < 50) {
							minDiv.style.left = minDiv_left + "px";
						}
						
						console.log(minDiv_left)
						//设置拖动后小方块的left值
						minDiv.style.left = minDiv_left + "px";
						// msg.innerText = parseInt((minDiv_left / (lineDiv.offsetWidth - 15)) * 100);
						// vals.innerText = parseInt((minDiv_left / (lineDiv.offsetWidth - 15)) * 100);
						}
					}
					var end = function(e) {
						var x = e.clientX;
						console.log("鼠标弹起")
						ifBool = false;

					}
					//鼠标按下方块
					minDiv.addEventListener("touchstart", start);
					minDiv.addEventListener("mousedown", start);
					//拖动
					window.addEventListener("touchmove", move);
					window.addEventListener("mousemove", move);
					//鼠标松开
					window.addEventListener("touchend", end);
					window.addEventListener("mouseup", end);
				
				}
			},
			//获取元素的绝对位置
			getPosition(node) {
				var left = node.offsetLeft; //获取元素相对于其父元素的left值var left
				var top = node.offsetTop;
				var current = node.offsetParent; // 取得元素的offsetParent
				// 一直循环直到根元素
			
				while (current != null) {
					left += current.offsetLeft;
					top += current.offsetTop;
					current = current.offsetParent;
				}
				return {
					"left": left,
					"top": top
				};
			}
		}
	}
</script>

<style lang="scss">
	@import '@/styles/mixins.scss';

	.time-axis {
		width: 100%;
		height: 60rpx;
		margin: 5rpx 0;
		width: 343px;
		margin: 100px auto;
		margin-bottom: 0;
		background-color: #fff;
		@include flex-center;
		@include shadow;
		@include radius;

		.time-control {
			width: 50rpx;
			height: 50rpx;
			font-size: 40rpx;
			color: #c6c6c6;
			margin: 0 8rpx;
			border-radius: 50%;
			@include flex-center;
		}

		.time-line {
			flex: 1;
			margin: 0 40rpx;
			display: flex;

			.item {
				width: auto;
				height: 46rpx;
				// color: #fff;
				font-size: 10px;
				line-height: 50rpx;
				text-align: center;
				border-radius: 20rpx;
				// background-color: #1989fa;
				padding: 0 20rpx
			}
		}


	}

	.lineDiv {
		position: relative;
		height: 5px;
		background: red;
		width: 272px;
		margin: 50px auto;
		margin-top: 0;
		left: 14px;
	}

	.lineDiv .minDiv {
		position: absolute;
		top: 2px;
		left: 62px;
		width: 8px;
		height: 8px;
		background: green;
		cursor: pointer;
	}

	.lineDiv .minDiv .vals {
		position: absolute;
		font-size: 20px;
		top: -45px;
		left: -10px;
		width: 35px;
		height: 35px;
		line-height: 35px;
		text-align: center;
		background: blue;
	}

	.lineDiv .minDiv .vals:after {
		content: "";
		width: 0px;
		height: 0px;
		border-top: 6px solid blue;
		border-left: 6px solid transparent;
		border-right: 6px solid transparent;
		border-bottom: 6px solid transparent;
		display: block;
		margin-left: 11px;
	}
</style>
